<template>
  <div class="loginConten">
    <div class="loginConten3">
    </div>
    <!-- <div class="audio">
      <audioTest></audioTest>
    </div> -->

    <div class="left-div">
      <div class="system-text">丝宝电商数据分析平台</div>

      <div class="userInfor">
        <div class="title">登录</div>
        <img src="../assets/img/login/splitline.png">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="userForm">
          <!-- <div class="userDiv">账号</div> -->
          <el-form-item prop="userName">
            <img src="../assets/img/login/user.png" />
            <input v-model="ruleForm.userName" placeholder="请输入用户名" class="formInput" />
          </el-form-item>
          <el-form-item prop="passWord" style="margin-bottom: 26px !important">
            <img src="../assets/img/login/psd.png" />
            <input v-model="ruleForm.passWord" placeholder="请输入密码" class="formInput" type="password" />
          </el-form-item>
          <!-- <div class="passDiv">密码</div> -->
          <login-validate class="validate" :successFun="validateSuccess"></login-validate>
          <el-button type="primary" @click="submitForm('ruleForm')">登 录</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { Login, service } from "../services/backServices"
import loginValidate from "@/components/theOne/LoginValidate.vue"
// import audioTest from "./audio.vue"
export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        userName: "",
        passWord: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        passWord: [
          { required: true, message: "请输入密码", trigger: "change" },
        ],
      },
      windosHeight: null,//浏览器高度
      // 是否通过验证
      isValidated: false,
      copyright: "",
    };
  },
  methods: {
    //提交用户名和密码
    submitForm(formName) {
      let _this = this;
      //登录格式验证
      _this.$refs[formName].validate((valid) => {
        if (valid) {
          if (_this.isValidated) {
            console.log("userName为："+_this.ruleForm.userName)
            console.log("passWord为："+_this.ruleForm.passWord)
            
            Login(_this.ruleForm.userName, _this.ruleForm.passWord).then(
              (response) => {
                console.log("进入Login")
                if (response) {
                  //保存用户信息    
                  console.log("保存用户信息")
                  _this.$router.push({ path: "/Page" });
                } else {
                  console.log("进入Login，但账号或者密码错误")
                  _this.$notify({
                    message: "账号或者密码错误！",
                    type: "error",
                    position: "bottom-right",
                    duration: 1000,
                  });
                }
              }
            ).catch(() => {
              console.log("没进入Login函数")
              _this.$notify({
                message: "账号或者密码错误！",
                type: "error",
                position: "bottom-right",
                duration: 1000,
              });
            });
          } else {
            _this.$notify({
              message: "请先通过验证！",
              type: "error",
              position: "bottom-right",
              duration: 1000,
            });
          }
        } else {
          _this.$notify({
            message: "请输入完整的登录信息！",
            type: "error",
            position: "bottom-right",
            duration: 1000,
          });
        }
      });
    },
    //重置用户名和密码
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getHeight() {
      // 获取浏览器高度，减去顶部导航栏的值70（可动态获取）,再减去head-DIV高度值80
      this.windosHeight = window.innerHeight + 'px'
    },
    validateSuccess() {
      let _this = this
      _this.isValidated = true
    }
  },
  components: {
    loginValidate,
    // audioTest
  },
  created() {
    // let data = new FormData()
    // data.append('beginDate', "2023-10-09");
    // data.append('endDate', "2023-10-10");
    // data.append('unit', "周");
    // service({
    //   url: "getCompetingGmvData",
    //   method: "post",
    //   data: data
    // }).then(res => {
    //   console.log(res.data)
    // })
    window.addEventListener('resize', this.getHeight) // 注册监听器
    this.getHeight() // 页面创建时先调用一次
    let _this = this;
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      // 13是回车按键
      if (key == 13) {
        _this.submitForm("ruleForm")
      }
    };
    this.copyright = GlobalSetting.IotConfig.companyCopyright
  },
  // 生命周期 - 销毁完成
  destroyed() {
    window.removeEventListener('resize', this.getHeight);
    document.onkeydown = null;
  },
};
</script>
<style scoped  lang="less">
.loginConten {
  width: 100%;
  height: 100%;
  margin: 0;
  text-align: center;
}

.loginConten3 {
  width: 100%;
  height: 100vh;
  background: url("../assets/img/login/bg.png") no-repeat center;
  background-size: 100% 100%;
}

.title-dom {
  left: 99px;
  width: fit-content;
  position: absolute;
  bottom: 60px;
  text-align: left;

  .title-name {
    font-weight: 600;
    font-size: 64px;
  }

  .sub-title {
    font-size: 40px;
  }
}

.system-text {
  z-index: 5;
  position: absolute;
  top: -30%;
  font-size: 2.8rem;
  width: max-content;
  text-align: center;
  color: #2e6cfc;
  font-size: 60px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

.left-div {
  position: absolute;
  top: 30%;
  left: 15%;
}

.userInfor {
  z-index: 5;
  height: 499px;
  width: 449px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.title {
  color: #2e6cfc;
  // line-height: 72px;
  font-weight: 400;
  font-size: 30px;
  margin-top: 25px;
  margin-bottom: 17px;
}

.userForm {
  height: 152px;
  width: 449px;
  position: absolute;
  top: 120px;
  color: #919191;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;

  .el-form-item {
    margin-bottom: 19px !important;

    ::v-deep .el-form-item__error {
      padding-top: 16px !important;
      padding-left: 25px !important;
    }

    img {
      position: relative;
      left: 38px;
      top: 8px;
    }
  }
}

.formInput {
  width: 390px;
  height: 70px;
  background-color: #fff;
  font-family: 黑体;
  font-size: 16px;
  color: #222;
  margin-bottom: 40px;
  border-radius: 10px;
  padding-left: 50px;
  box-sizing: border-box;
}

/* 解决placeholder颜色问题 */
input::-webkit-input-placeholder,
input::-moz-placeholder,
/* Mozilla Firefox 19+ */
input:-moz-placeholder,
/* Mozilla Firefox 4 to 18 */
input:-ms-input-placeholder

/* Internet Explorer 10-11 */
  {
  color: rgb(162, 166, 182);
}

input {
  outline: medium;
  border: 1px solid rgb(237, 237, 242);
}

input:focus {
  border: 1px solid #1e90ff;
}

.userDiv {
  width: 28px;
  height: 17px;
  // background: url("../assets/img/login/user.jpg") no-repeat center;
  // background-size: 100% 100%;
  position: absolute;
  left: 59px;
  top: 14px;
  z-index: 5;
}

.passDiv {
  width: 28px;
  height: 17px;
  // background: url("../assets/img/login/pword.jpg") no-repeat center;
  // background-size: 100% 100%;
  position: absolute;
  left: 59px;
  top: 102px;
  z-index: 5;
}

.el-button {
  width: 360px;
  height: 50px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 23px;
  line-height: 16px;
  border-radius: 45px;
  background-color: #0066ff;
  border: 0;
}

/* 通过时间延迟解决自动填充密码的样式问题 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition-delay: 99999s;
  transition: color 99999s ease-out, background-color 99999s ease-out;
  -webkit-transition-delay: 99999s;
  -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
  -webkit-text-fill-color: #222;
}

.el-form-item {
  margin-bottom: 0 !important;
  height: 70px;
}

::v-deep .el-form-item__error {
  top: 52%;
  left: 7.7%;
}

.validate {
  margin-bottom: 50px;
}

.audio {
  position: absolute;
  top: 20px;
  z-index: 100;
  height: 300px;
  width: 100%;
}
</style>
